<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/contact/bg1.png" />
      <p class="ft-36">{{ lang === 'zh' ? '联系我们' : 'Contact us' }}</p>
      <p class="ft-24">{{ $t('aboutUs.title') }}</p>
    </div>
    <div class="navbar">
      <div v-for="(item, index) in list" :key="index" class="navbar-in">
        <img :src="item.img" alt="" />
        <p class="city">{{ item[`city${capitalizeLang}`] }}</p>
        <h1>{{ item[`company${capitalizeLang}`] }}</h1>
        <p>{{ $t('contactUs.address') }}: {{ item[`address${capitalizeLang}`] }}</p>
        <p>{{ $t('contactUs.phone') }}: {{ item.phone }}</p>
        <p>{{ $t('contactUs.contact') }}: {{ item[`contact${capitalizeLang}`] }}</p>
        <p>{{ $t('contactUs.email') }}: {{ item.email }}</p>
        <p>{{ $t('contactUs.wechat') }}: {{ item.wechat }}</p>
      </div>
    </div>
    <h2>{{ $t('contactUs.message') }}</h2>
    <h2 class="blue">{{ $t('contactUs.tips') }}</h2>
    <div class="form">
      <div class="form-top">
        <div class="gender" @click="gender = !gender">
          <div class="gender-in" :class="{ active: gender }">
            <span>{{ $t('common.form.mr') }}</span>
            <em></em>
          </div>
          <div class="gender-in" :class="{ active: !gender }">
            <span>{{ $t('common.form.ms') }}</span>
            <em></em>
          </div>
        </div>
        <div class="chart">
          <div class="chart-in">
            <img src="@/assets/images/index/Wechat.png" alt="" />
            <div class="hover-box">
              <img
                src="http://bepai-sotenowe.oss.bepai.net/source/on-line/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="chart-in">
            <img src="@/assets/images/index/Telephone.png" alt="" @click="handleJumpWhatsapp" />
            <div class="hover-span">
              <span>177 8203 0739</span>
            </div>
          </div>
        </div>
      </div>
      <el-form inline :model="formData">
        <el-form-item :label="`*${$t('common.form.name')}:`">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item :label="`*${$t('common.form.phone')}:`">
          <el-input v-model="formData.telephone"></el-input>
        </el-form-item>
        <el-form-item :label="`*${$t('common.form.region')}:`">
          <el-input v-model="formData.country"></el-input>
        </el-form-item>
        <el-form-item :label="`*${$t('common.form.email')}:`">
          <el-input v-model="formData.email"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('common.form.vertical-market')}:`">
          <el-input v-model="formData.verticalMarket"></el-input>
        </el-form-item>
        <el-form-item :label="`*${$t('common.form.company')}:`">
          <el-input v-model="formData.company"></el-input>
        </el-form-item>
        <el-form-item :label="`${$t('common.form.howFind')}:`">
          <el-input v-model="formData.findWay"></el-input>
        </el-form-item>
        <el-form-item label="" class="full">
          <el-input
            v-model="formData.question"
            type="textarea"
            :rows="6"
            :placeholder="`${$t('common.form.talkToMe')}`"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button :loading="loading" @click="handleSubmit">{{ $t('common.submit') }}</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import * as api from '@/const/api'

export default {
  data() {
    return {
      gender: true,
      formData: {
        name: '', // 姓名
        telephone: '', // 手机
        email: '', // 邮箱
        company: '', // 公司
        country: '',
        verticalMarket: '', // 垂直市场
        findWay: '', // how to find
        question: '',
      },
      list: [
        {
          img: require('@/assets/images/contact/shenzhen.png'),
          cityZh: '深圳',
          cityEn: 'Shenzhen',
          companyZh: '深圳市硕腾科技有限公司（总部）',
          companyEn: 'Shenzhen Soten Technology Co., Ltd',
          addressZh: '中国·深圳市南山区西丽街道白芒社区沙河西路5318号2栋1001',
          addressEn:
            '1001, Building 2, No. 5318, Shahe West Road, Baimang Community, Xili Street, Nanshan District, Shenzhen, China',
          phone: '（0755）61827963',
          contactZh: '刘小姐',
          contactEn: 'Miss Liu',
          email: 'hr@soten.com.cn',
          wechat: 'hrsoten111228',
        },
        {
          img: require('@/assets/images/contact/chengdu.png'),
          cityZh: '成都',
          cityEn: 'Chengdu',
          companyZh: '成都市必派科技有限公司',
          companyEn: 'Chengdu Bipai Technology Co., Ltd',
          addressZh: '中国（四川）自由贸易试验区成都高新区府城大道西段399号7栋1单元11楼2号',
          addressEn:
            'No. 2, 11th Floor, Unit 1, Building 7, No. 399, West Section of Fucheng Avenue, Chengdu High-tech Zone, China (Sichuan) Pilot Free Trade Zone',
          phone: '+86-18030450798',
          contactZh: '徐先生',
          contactEn: 'Mr Xu',
          email: 'bepai201804@gmail.com',
          wechat: 'wasai_123',
        },
        // {
        //   img: require('@/assets/images/contact/shanghai.png'),
        //   cityZh: '上海',
        //   cityEn: 'Shanghai',
        //   companyZh: '上海市硕腾科技有限公司',
        //   companyEn: 'Shanghai Soten Technology Co., Ltd',
        //   addressZh: '中国·深圳市南山区沙河西路5308号百旺研发大厦2栋10楼',
        //   addressEn:
        //     '10th Floor, Building 2, Baiwang R&D Building, No. 5308, Shahe West Road, Nanshan District, Shenzhen, China',
        //   phone: '+86(0755)-6188515661827963',
        //   contactZh: '',
        //   contactEn: '',
        //   email: '',
        //   wechat: '',
        // },
        {
          img: require('@/assets/images/contact/chongqing.png'),
          cityZh: '重庆',
          cityEn: 'Chongqing',
          companyZh: '重庆阿酷斯科技有限公司',
          companyEn: 'Chongqing Akusi Technology Co., Ltd',
          addressZh: '中国·重庆市江北区北城天街15号负2号138-3号',
          addressEn: 'No. 138-3, No. 15, Beicheng Tianjie, Jiangbei District, Chongqing, China',
          phone: '+86-17783622608',
          contactZh: '李小姐',
          contactEn: 'Miss Li',
          email: '985581756@qq.com',
          wechat: '17783622608',
        },
      ],
      loading: false,
    }
  },
  computed: {
    ...mapState(['lang', 'isZh']),
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    async handleSubmit() {
      try {
        if (this.loading) {
          return
        }
        const flag = Object.entries(this.formData).every(([key, value]) => {
          if (!value && key !== 'question') {
            return false
          }
          return true
        })

        if (!flag) {
          throw new Error(this.$t('common.form.info'))
        }

        const params = {
          ...this.formData,
          userLang: this.lang,
          sex: this.gender ? 1 : 0,
        }
        this.loading = true
        const { code, msg } = await this.$axios.$post(api.userQuestion, params)
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }

        this.$message.success(this.$t('common.form.success'))
        this.formData = {}
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleJumpWhatsapp() {
      if (this.isZh) {
        window.open('https://work.weixin.qq.com/ca/cawcdec2e016c3c426')
      } else {
        window.open('https://wa.me/8617782030739')
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  display: flex;
  flex-direction: column;

  .banner {
    display: flex;
    position: relative;
    color: #fff;
    font-weight: bold;

    img {
      width: 100%;
    }

    .ft-48 {
      .ft(48);
      .top(200);

      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, 0.4);
    }

    .ft-36 {
      .ft(36);
      .top(200);

      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .ft-24 {
      .ft(24);
      .top(260);

      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .navbar {
    .width(1200);
    .pd(100, 0, 0, 0);

    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .navbar-in {
      .width(600);

      background: #f6f7f9;
      .mg(0, 0, 42, 0);
      .pd(0, 0, 40, 0);

      position: relative;
      color: #333;

      p {
        .pd(0, 40, 0, 40);
        .ft(18);
      }

      h1 {
        .pd(0, 40, 15, 40);
        .ft(22);

        font-weight: 500;
        position: relative;

        &::after {
          content: '';
          display: block;
          height: 2px;
          .width(45);
          .top(27);

          position: absolute;
          background-color: #0762cb;
        }
      }

      img {
        .width(600);
        .height(180);
        .mg(0, 0, 50, 0);
      }

      .city {
        .ft(30);
        .top(90);
        .left(80);

        color: #fff;
        position: absolute;
        padding: 0;
        font-weight: bold;
      }
    }
  }

  h2 {
    text-align: center;
    .ft(30);

    &.blue {
      .ft(16);
    }
  }

  .form {
    .width(1200);

    margin: 0 auto;
    .pd(80, 0, 80, 0);

    .form-top {
      display: flex;
      justify-content: space-between;
      .pd(0, 0, 20, 0);
    }

    .gender {
      .ft(18);
      .mg(0, 0, 20, 0);

      display: flex;

      .gender-in {
        display: flex;
        align-items: center;
        cursor: pointer;

        &.active {
          span {
            color: #075fc4;
          }

          em {
            background-image: url(@/assets/images/index/selected-active.png);
          }
        }

        em {
          display: inline-block;
          .width(20);
          .height(20);

          background-image: url(@/assets/images/index/selected.png);
          background-size: 100% 100%;
          .mg(0, 20, 0, 4);
        }

        span {
          .mg(0, 00, 0, 0);
        }
      }
    }

    .chart {
      .pd(30, 0, 80, 0);

      .chart-in {
        position: relative;
        display: inline-block;
        cursor: pointer;
        .mg(0, 12, 0, 0);

        .hover-box {
          position: absolute;
          opacity: 0;
          transition: all 0.3s;
          top: 0;
          left: 50%;
          transform: translate(-50%);
          z-index: 20;

          &::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 0.416vw solid transparent;
            border-right: 0.416vw solid transparent;
            border-top: 0.3125vw solid #fff;
            position: absolute;
            bottom: -0.3125vw;
            left: 50%;
            transform: translate(-50%);
          }
        }

        .hover-span {
          .width(0);
          .height(0);
          .ft(0);

          position: absolute;
          opacity: 0;
          transition: all 0.3s;
          top: 0;
          left: 50%;
          background-color: #0261bc;
          color: #fff;
          font-weight: bold;
          transform: translate(-50%, 0);
          text-align: center;
          border-radius: 0.3125vw;

          &::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-left: 0.416vw solid transparent;
            border-right: 0.416vw solid transparent;
            border-top: 0.3125vw solid #fff;
            position: absolute;
            bottom: -0.3125vw;
            left: 50%;
            transform: translate(-50%);
          }
        }

        &:hover {
          .hover-box {
            .width(128);
            .height(128);
            .top(-140);

            opacity: 1;

            img {
              .width(128);
              .height(128);

              border-radius: 4px;
            }
          }

          .hover-span {
            .width(160);
            .height(30);
            .top(-40);
            .ft(18);

            opacity: 1;

            span {
              .width(160);
              .height(30);

              border-radius: 4px;
            }
          }
        }
      }

      img {
        .width(32);
        .height(32);
        .mg(0, 0, 0, 0);
      }
    }

    :deep(.el-form) {
      font-size: 0;
      color: #333;

      .el-form-item {
        width: 50%;
        .mg(0, 0, 30, 0);

        border-bottom: 1px solid #333;

        &:nth-child(2n + 1) {
          width: 45%;
          margin-right: 5%;
        }

        .el-form-item__label {
          .ft(18);
        }

        .el-form-item__content {
          .width(380);

          .el-input__inner {
            border: none;
          }
        }
      }

      .full {
        width: 100%;
        border: none;

        .el-form-item__content {
          width: 100%;

          .el-textarea__inner {
            width: 100%;
            border: 1px solid #333;
            .ft(18);
          }
        }
      }
    }

    .el-button {
      .width(344);
      .height(60);
      .lineH(60);

      background: #0261bc;
      color: #fff;
      border: none;
      padding: 0;
      margin: 40px auto 0 auto;
      display: block;
    }
  }
}
</style>
